<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">
    <title>jQuery</title>
</head>

<body>

    <!-- 
        jQuery:（逐渐被淘汰的js库）一个实用的js库；
            库： 
                字典、工具集合、操作手册；提供了丰富的工具，使得项目开发能更加高效；
                能解决的问题很有限，没有思想，只是单纯的节省代码的书写时间；
            框架： 
                搭建一个大模型，使得每个人的开发都有相对统一的结构，便于维护和管理；
                提供项目结构和所需的工具；具有工程化和组件化的特性；未来发展的主流；

        如何学习：
            学习jq的底层思想，设计
            api: 常见的api很快就能掌握；
            设计思想：
                write less, do more 写的少，做的多；
                链式操作：不停的 点操作 按顺序执行

            整体本质上就是一个函数，即 $()；

            建议使用 cdn 使用现成的 代码引用；

            看源码：
                1.遇到函数声明直接跳过；
                2.最新版看不懂，请看老版本代码；
                    JQ 的核心就是 jQuery对象

     -->

    <script>
        //  尝试写一个 Jq 的大致构型

        // jq 整体就是一个立执行函数
        (function () {

            // 声明核心对象 jQuery
            var jQuery = function () {
                return new jQuery.fn.init()
            }

            // 初始化方法 可以去访问 this
            jQuery.fn.init = function () {
                return this
            }
            // 在原型当中实现各种 api
            jQuery.prototype = {
                css: function () {
                    // ...
                    return this // 返回本身 可以继续链式操作
                },
                html: function () {
                    // ...
                    return this
                }
            }

            window.$ = jQuery
        })()
    </script>

</body>

</html>